<!DOCTYPE html>
<html class="ui-page-index">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="App/css/mui.min.css?Version=System.Version" rel="stylesheet">
    <link href="App/Global.css?Version=System.Version" rel="stylesheet">
    <style>
        .mui-btn-primary {
            background-color: #11b7f3 !important;
            font-size: 16px;
            border: none;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .mui-input-row,
        .mui-input-row input {
            font-size: 14px;
        }
        .mt20{
          margin-top: 20px;
        }

        #SubmitButton {
            width: 96%;
            padding: 13px;
            font-size: 16px;
            margin-bottom: 10px;
            text-align: center;
            border-radius: 8px;
            background-color: #fff;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div id="vue-wrap">
        <!-- 主页面标题(Begin) -->
        <header class="mui-bar mui-bar-nav Relative">
            <a class="mui-icon mui-icon-left-nav mui-pull-left" @click="goBack"></a>
            <h2 class="mui-title">{{resData.name}}</h2>
        </header>
        <!-- 主页面标题(End) -->

        <!-- 主界面具体展示内容(Begin) -->
        <div style="margin-top: 0px; padding: 10px;">
            <div class="mui-content mui-scroll-wrapper">
                <div class="mui-scroll" id="PageMainContentScrollDIV" style="padding-bottom: 60px;">
                    <!-- 主界面具体展示内容(Begin) -->
                    <div style="padding-top: 10px; margin-top: 40px; background-color: transparent !important;">
                        <!-- 右眼 -->
                        <div v-if="resData.resultType=='BINOCULUS'" class="mt20 mui-card">
                            <!-- <h5 class="mui-content-padded">右眼 <span v-if="resData.unit">(单位：{{resData.unit}})</span></h5> -->
                            <div class="mui-card-header">
                                右眼 <span v-if="resData.unit">(单位：{{resData.unit}})</span>
                            </div>
                            <div v-if="resData.formType=='CHECKBOX'" class="">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell" v-for="item in resData.primaryValueList">
                                        <div class="mui-input-row mui-checkbox mui-left">
                                            <label>{{item.itemValue}}</label>
                                            <input name="checkbox" type="checkbox" @change="changeCheckbox($event,resData.result.rightResult,item.itemKey)"
                                                :checked="resData.result.rightResult.indexOf(item.itemKey)!=-1">
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div v-if="resData.formType=='REDIO'" class="">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell" v-for="item in resData.primaryValueList">
                                        <div class="mui-input-row mui-radio">
                                            <label>{{item.itemValue}}</label>
                                            <input name="radio2" type="radio" @change="changeRadio(resData.result,'rightResult',item.itemValue)"
                                                :checked="resData.result.rightResult==item.itemValue">
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div v-if="resData.formType=='SELECT'" class="">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell" >
                                      <span style="display:block;float:left;width:50%">{{resData.name}}</span>
                                      <select style="float:right;width:auto;margin:0;padding:0;" v-model="resData.result.rightResult" @change="changeRadio(resData.result,'rightResult',item.itemValue)" class="" name="" placeholder="请选择">
                                        <option style="color:#999" disabled :value="'' || null">请选择</option>
                                        <option v-for="item in resData.primaryValueList" :value="item.itemValue">{{item.itemValue}}</option>
                                      </select>
                                        <!-- <div class="mui-input-row mui-radio">
                                            <label>{{item.itemValue}}</label>
                                            <input name="radio1" type="radio" @change="changeRadio(resData.result,'leftResult',item.itemValue)"
                                                :checked="resData.result.leftResult==item.itemValue">
                                        </div> -->
                                    </li>
                                </ul>
                            </div>

                            <div v-if="resData.formType=='INPUT'" class="">
                                <div class="mui-input-row" style="padding:10px">
                                    <input type="text" placeholder="请输入" v-model="resData.result.rightResult">
                                </div>
                            </div>

                            <div v-if="resData.formType=='TEXT'" class="">
                                <div class="mui-input-row mui-checkbox mui-left" style="padding:10px">
                                    <textarea rows="5" v-model="resData.result.rightResult"></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- 左眼 -->
                        <div v-if="resData.resultType=='BINOCULUS'" class="mui-card">
                            <!-- <h5 class="mui-content-padded">左眼 <span v-if="resData.unit">(单位：{{resData.unit}})</span></h5> -->
                            <div class="mui-card-header">
                                左眼 <span v-if="resData.unit">(单位：{{resData.unit}})</span>
                            </div>
                            <div v-if="resData.formType=='CHECKBOX'">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell" v-for="item in resData.primaryValueList">
                                        <div class="mui-input-row mui-checkbox mui-left">
                                            <label>{{item.itemValue}}</label>
                                            <input name="checkbox" type="checkbox" @change="changeCheckbox($event,resData.result.leftResult,item.itemKey)"
                                                :checked="resData.result.leftResult.indexOf(item.itemKey)!=-1">
                                        </div>
                                    </li>
                                </ul>

                            </div>

                            <div v-if="resData.formType=='REDIO'" class="">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell" v-for="item in resData.primaryValueList">
                                        <div class="mui-input-row mui-radio">
                                            <label>{{item.itemValue}}</label>
                                            <input name="radio1" type="radio" @change="changeRadio(resData.result,'leftResult',item.itemValue)"
                                                :checked="resData.result.leftResult==item.itemValue">
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div v-if="resData.formType=='SELECT'" class="">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell" >
                                      <span style="display:block;float:left;width:50%">{{resData.name}}</span>
                                      <select style="float:right;width:auto;margin:0;padding:0;" v-model="resData.result.leftResult" @change="changeRadio(resData.result,'leftResult',item.itemValue)" class="" name="" placeholder="请选择">
                                        <option style="color:#999" disabled :value="'' || null">请选择</option>
                                        <option v-for="item in resData.primaryValueList" :value="item.itemValue">{{item.itemValue}}</option>
                                      </select>
                                        <!-- <div class="mui-input-row mui-radio">
                                            <label>{{item.itemValue}}</label>
                                            <input name="radio1" type="radio" @change="changeRadio(resData.result,'leftResult',item.itemValue)"
                                                :checked="resData.result.leftResult==item.itemValue">
                                        </div> -->
                                    </li>
                                </ul>
                            </div>

                            <div v-if="resData.formType=='INPUT'" class="">
                                <div class="mui-input-row" style="padding:10px">
                                    <input type="text" placeholder="请输入" v-model="resData.result.leftResult">
                                </div>
                            </div>

                            <div v-if="resData.formType=='TEXT'" class="">
                                <div class="mui-input-row mui-checkbox mui-left" style="padding:10px">
                                    <textarea rows="5" v-model="resData.result.leftResult"></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- 整眼 -->
                        <div v-if="resData.resultType=='ONE'" class="mui-card">
                            <!-- <h5 class="mui-content-padded"><span v-if="resData.unit">(单位：{{resData.unit}})</span></h5> -->
                            <div class="mui-card-header">
                                整眼<span v-if="resData.unit">(单位：{{resData.unit}})</span>
                            </div>
                            <div v-if="resData.formType=='CHECKBOX'" class="">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell" v-for="item in resData.primaryValueList">
                                        <div class="mui-input-row mui-checkbox mui-left">
                                            <label>{{item.itemValue}}</label>
                                            <input name="checkbox" type="checkbox" @change="changeCheckbox($event,resData.result.result,item.itemKey)"
                                                :checked="resData.result.result.indexOf(item.itemKey)!=-1">
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div v-if="resData.formType=='REDIO'" class="">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell" v-for="item in resData.primaryValueList">
                                        <div class="mui-input-row mui-radio">
                                            <label>{{item.itemValue}}</label>
                                            <input name="radio1" type="radio" @change="changeRadio(resData.result,'result',item.itemValue)"
                                                :checked="resData.result.result==item.itemValue">
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div v-if="resData.formType=='SELECT'" class="">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell" >
                                      <span style="display:block;float:left;width:50%">{{resData.name}}</span>
                                      <select style="float:right;width:auto;margin:0;padding:0;" v-model="resData.result.result" @change="changeRadio(resData.result,'result',item.itemValue)" class="" name="" placeholder="请选择">
                                        <option style="color:#999" disabled :value="'' || null">请选择</option>
                                        <option v-for="item in resData.primaryValueList" :value="item.itemValue">{{item.itemValue}}</option>
                                      </select>
                                        <!-- <div class="mui-input-row mui-radio">
                                            <label>{{item.itemValue}}</label>
                                            <input name="radio1" type="radio" @change="changeRadio(resData.result,'leftResult',item.itemValue)"
                                                :checked="resData.result.leftResult==item.itemValue">
                                        </div> -->
                                    </li>
                                </ul>
                            </div>

                            <div v-if="resData.formType=='INPUT'" class="">
                                <div class="mui-input-row mui-checkbox mui-left">
                                    <input type="text" placeholder="请输入" v-model="resData.result.result">
                                </div>
                            </div>

                            <div v-if="resData.formType=='TEXT'" class="" style="padding:10px">
                                <div class="mui-input-row mui-checkbox mui-left">
                                    <textarea rows="5" v-model="resData.result.result"></textarea>
                                </div>
                            </div>
                        </div>


                        <div v-if="resData.resultType=='REFRACTION'" class="mui-card">
                            <div class="mui-card-header">
                                右眼 <span v-if="resData.unit">(单位：{{resData.unit}})</span>
                            </div>
                            <div class="mui-input-row">
                                <label>球镜</label>
                                <input class="mui-input-clear" type="text" placeholder="请输入" v-model="resData.result.rightSphere">
                            </div>
                            <div class="mui-input-row">
                                <label>柱镜</label>
                                <input class="mui-input-clear" type="text" placeholder="请输入" v-model="resData.result.rightCyl">
                            </div>
                            <div class="mui-input-row">
                                <label>轴位</label>
                                <input class="mui-input-clear" type="text" placeholder="请输入" v-model="resData.result.rightAxial">
                            </div>
                            <div class="mui-input-row">
                                <label>矫正视力</label>
                                <input class="mui-input-clear" type="text" placeholder="请输入" v-model="resData.result.rightAdjust">
                            </div>
                        </div>

                        <!-- type REFRACTION -->
                        <div v-if="resData.resultType=='REFRACTION'" class="mui-card mui-input-group">
                            <div class="mui-card-header">
                                左眼 <span v-if="resData.unit">(单位：{{resData.unit}})</span>
                            </div>
                            <div class="mui-input-row">
                                <label>球镜</label>
                                <input class="mui-input-clear" type="text" placeholder="请输入" v-model="resData.result.leftSphere">
                            </div>
                            <div class="mui-input-row">
                                <label>柱镜</label>
                                <input class="mui-input-clear" type="text" placeholder="请输入" v-model="resData.result.leftCyl">
                            </div>
                            <div class="mui-input-row">
                                <label>轴位</label>
                                <input class="mui-input-clear" type="text" placeholder="请输入" v-model="resData.result.leftAxial">
                            </div>
                            <div class="mui-input-row">
                                <label>矫正视力</label>
                                <input class="mui-input-clear" type="text" placeholder="请输入" v-model="resData.result.leftAdjust">
                            </div>
                        </div>




                        <div class="mt20">
                            <h5 class="mui-content-padded">参考值</h5>
                            <div class="mui-card" style="padding:10px;min-height:60px">
                                {{resData.referenceValue?resData.referenceValue:''}}
                            </div>
                        </div>


                        <div v-if="resData.isRemark" class="mt20">
                            <h5 class="mui-content-padded">备注</h5>
                            <div class="mui-input-row" style="margin: 10px 5px;">
                                <textarea rows="3" v-model="resData.result.remark"></textarea>
                            </div>
                        </div>

                        <div id="SummaryChartDIV" style="margin-top: 5px;"></div>
                    </div>
                    <!-- 主界面具体展示内容(End) -->
                    <div style="text-align:center; margin-top:10px;">
                        <div id="SubmitButton" class="mui-badge mui-badge-primary mui-badge-green CenterDIV" @click="saveForm">保存</div>
                        <!-- <div id="SubmitButton" class="mui-badge mui-badge-primary mui-badge-green CenterDIV" onclick="CreateNewCustomerInfo()">保存</div> -->
                        <!--                <button class="mui-btn"  id="Button1" style="padding-top:8px; color:#777; font-size:13px; width:48%; float:left; font-weight:bold;" onclick="CreateNewCustomerInfo()">新建客户档案</button>
                        <button class="mui-btn"  id="Button2" style="padding-top:8px; color:#777;  font-size:13px; width:48%; float:right; font-weight:bold;">添加客户联系人</button>
                        <div class="ClearFloat"></div>-->
                    </div>
                </div>

            </div>

        </div>
        <!-- 主界面具体展示内容(End) -->

    </div>

    <script src="App/script/core.js?Version=System.Version"></script>
    <script src="script/common.js?Version=System.Version"></script>
    <script src="App/script/mui.js?Version=System.Version"></script>
    <script src="App/Global.js?Version=System.Version"></script>
    <script src="App/script/MobileIframeInnerPageV5.js?Version=System.Version"></script>

    <script>
        var IDCardConfig = null;

        DomReady(function () {
            //初始化手机
            InitiateMobile();
            if (PageParameterObject.RequestQueryDictionary.hasOwnProperty("code") && PageParameterObject.RequestQueryDictionary.code.length > 0) {
                console.log(PageParameterObject.RequestQueryDictionary.code);
            }
        });
    </script>



    <script src="script/vue.min.js?Version=System.Version"></script>
    <!-- <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js" charset="utf-8"></script> -->
    <script src="script/lodash.min.js?Version=System.Version" charset="utf-8"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#vue-wrap",
            data: {
                resData: {},
                test: 0,
                CheckListDetail: {}
            },
            mounted() {
                // console.log(PageParameterObject.RequestQueryDictionary.code,'PageParameterObject.RequestQueryDictionary.code');
                // console.log(PageParameterObject.RequestQueryDictionary.orderNo,'PageParameterObject.RequestQueryDictionary.code');
                _.forEach(UserInfo, item => {
                    console.log(item, 'item');
                })
                console.log(UserInfo, 'UserInfo');


                LoadServiceClass.LoadServiceInterfaceByDLLSetting("Plugins.dll|Plugins.CheckListPlugins|GetCheckListItem", "获取检查项数据", false, "", GetLoadingMsg("正在检查，请稍等..."),
                    {
                        orderNo: PageParameterObject.RequestQueryDictionary.orderNo,
                        code: PageParameterObject.RequestQueryDictionary.code
                    }, function (res) {
                        console.log(res, 'res');
                        var resData = (JSON.parse(res.Result)).data;
                        // vm.CheckListDetail = result.data;
                        resData.result = JSON.parse(resData.result);
                        if(!resData.result) resData.result={}

                        if (resData.formType === 'CHECKBOX') {
                            if (resData.resultType === 'ONE') {
                                console.log(resData.result['result'], 'resData.result[result]');
                                var val = resData.result['result']
                                resData.result['result'] = []
                                if (vm.isJsonString(val)) {
                                    _.forEach(JSON.parse(val), function (item) {
                                        resData.result['result'].push(item)
                                    })
                                } else {
                                    resData.result['result'].push(val)
                                }
                            } else if (resData.resultType === 'BINOCULUS') {

                                var leftResult = resData.result['leftResult']
                                var rightResult = resData.result['rightResult']
                                resData.result['leftResult'] = []
                                resData.result['rightResult'] = []
                                if (vm.isJsonString(leftResult)) {
                                    _.forEach(JSON.parse(leftResult), function (item) {
                                        resData.result['leftResult'].push(item)
                                    })
                                } else {
                                    resData.result['leftResult'].push(leftResult)
                                }

                                if (vm.isJsonString(rightResult)) {
                                    _.forEach(JSON.parse(rightResult), function (item) {
                                        resData.result['rightResult'].push(item)
                                    })
                                } else {
                                    resData.result['rightResult'].push(rightResult)
                                }

                                // resData.result.rightResult = resData.result.rightResult?JSON.parse(resData.result.rightResult):[]
                                // resData.result.leftResult = resData.result.leftResult?JSON.parse(resData.result.leftResult):[]
                            }
                        }


                        if (resData.formType === 'INPUT' || resData.formType === 'TEXT' || resData.formType === 'REDIO' || resData.formType === 'SELECT') {
                            if (resData.resultType === 'ONE') {
                                resData.result['result'] = resData.result['result'] || null
                            } else if (resData.resultType === 'BINOCULUS') {
                                resData.result['rightResult']= resData.result['rightResult']|| null
                                resData.result['leftResult']= resData.result['leftResult']|| null
                            }
                        }



                        resData.result = Object.assign({}, {
                            // "result": [],
                            "leftImg": null,
                            // "rightResult": [],
                            "rightImg": null,
                            "leftSphere": null,
                            "leftCyl": null,
                            "leftAxial": null,
                            "leftAdjust": null,
                            "rightSphere": null,
                            "rightCyl": null,
                            "rightAxial": null,
                            "rightAdjust": null,
                            // "leftResult": []
                        }, resData.result)

                        // resData.result.leftResult=[]
                        // resData.result.rightResult=[]
                        // resData.result.result=[]


                        vm.$set(vm, 'resData', resData)

                        console.log(resData, 'resData');
                    }, function (err) {
                        console.log(err);
                    }, { ActionName: "GetCheckListItem" });
            },
            methods: {
                goBack() {
                    LoadPageClass.LoadServerMobilePage(true, true, "page.Public.QRCode", { orderNo: PageParameterObject.RequestQueryDictionary.orderNo,code: PageParameterObject.RequestQueryDictionary.code });
                },
                isJsonString(str) {
                    try {
                        if (typeof JSON.parse(str) == "object") {
                            return true;
                        }
                    } catch (e) {
                    }
                    return false;
                },
                saveForm() {
                    var checklistitemString = {
                        "code": PageParameterObject.RequestQueryDictionary.code,
                        "orderNo": PageParameterObject.RequestQueryDictionary.orderNo,
                        "result": JSON.stringify(this.resData.result),
                        "uuid": UserInfo.UserGuid
                    }

                    console.log(this.resData.result, 'this.resData.result');

                    console.log(JSON.stringify(checklistitemString), 'checklistitemString');

                    LoadServiceClass.LoadServiceInterfaceByDLLSetting("Plugins.dll|Plugins.CheckListPlugins|SaveCheckListItem", "保存检查单项", false, "", GetLoadingMsg("正在检查，请稍等..."),
                        {
                            checklistitemString: JSON.stringify(checklistitemString)
                        }, function (res) {
                            // var result = JSON.parse(res.Result);
                            // vm.CheckListDetail = result.data;
                            console.log(res);
                            LoadPageClass.LoadServerMobilePage(true, true, "page.Public.QRCode", { orderNo: PageParameterObject.RequestQueryDictionary.orderNo, code: PageParameterObject.RequestQueryDictionary.code });
                        }, function (erro) {
                            console.log(erro);
                        }, { ActionName: "SaveCheckListItem" });
                },
                changeRadio(result, key, value) {
                    console.log(result, 'result');
                    console.log(key, 'key');
                    console.log(value, 'value');
                    vm.$set(result, key, value)
                    console.log(this.resData, 'resData');
                },
                changeCheckbox(e, result, value) {
                    console.log(e, 'e');
                    console.log(result, 'result');
                    console.log(value, 'value');
                    if (e.target.checked) {
                        if (result.indexOf(value) == -1) result.push(value)
                    } else {
                        result.splice(result.indexOf(value), 1)
                    }

                    console.log(this.resData, 'resData');
                }
            }
        });
    </script>
</body>

</html>
